import React, {Component} from 'react';
import {
    Flex,
    Icon,
    Tabs,
    NavBar,
    Popover,
    WingBlank,
    WhiteSpace,
    ActionSheet,
    Carousel,
    Modal,
    Grid,
    List,
    Button,
    Toast,
} from 'antd-mobile';
import { connect } from 'dva';
import Moment from 'moment';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import MyListView from '../../components/MyListView/MyListView';
import {routerRedux} from "dva/router";
import {distribution,distributionSearch,tianjiaGoods} from './distribution.less';
import DistributionItem from "./distributionItem";
import updown1 from '../../assets/svg/updown1.svg';
import updown2 from '../../assets/svg/updown2.svg';
import updown3 from '../../assets/svg/updown3.svg';
import {goto_search_title} from "../search/GotoSearch.less";
import {fenlei, noguanzhu} from "../find/findIndex.less";
import {goods_search_header} from "../search/GoodsSearch.less";

const Item = Popover.Item;




class MyDistribution extends Component {
    constructor(props){
        super(props);
        this.state={
            modal:false,
            value:""
        };

        this.AlloyTouch = null;

    }

    componentDidMount(){
        this.refresh();

    }
    onChange = (e) => {
        this.setState({
            value: e.target.value
        });
    };
    refresh = () => {
        return this.props.dispatch({ type: 'distribution/myStoreDetailEFF',obj:{pageNo:1 } });
    }

    loadMore = () => {
        const {dispatch,distribution} = this.props;
        console.log(distribution.sortField )
        return this.props.dispatch({ type: 'distribution/myStoreDetailEFF', obj:{pageNo:this.props.distribution.pageNo+1 ,sortField:distribution.sortField ,
                sortOrder:distribution.sortOrder } });
    }

    getAlloyTouch = (AT) =>{
        this.AlloyTouch = AT;
    };

    changeOrder = ( sortField, sortFeild ) =>{
        console.log(sortField, sortFeild)
        this.AlloyTouch.to(0);
        this.props.dispatch({
            type: 'distribution/myStoreDetailEFF',
            obj:{
                pageNo:1,
                sortField:sortField,
                sortOrder:sortFeild
            }
        });
    }

    render() {
        const {dispatch,distribution} = this.props;
        const {myStoreDetailList} = this.props.distribution;
        return ( <Flex direction="column" className={distributionSearch} style={{height:"100%" ,position:'relative',}}>
                <NavTopBar title="小店产品" dispatch={this.props.dispatch}/>
                {myStoreDetailList[0]? <Flex className={goods_search_header} style={{marginBottom:".15rem"}}>
                    <Flex
                        justify="center"
                        onClick={() => {
                            this.changeOrder('', distribution.sortField =='' ? ( distribution.sortOrder=="asc" ? "desc" : "asc" ) : "asc")}
                        }
                    >
                        <span style={distribution.sortField ==''?{marginRight: '.04rem',color:"#ff0036"}:{marginRight: '.04rem'}}>默认</span>
                        {/*<Icon  type={*/}
                        {/*filter.sortField =='' ? (filter.sortOrder=="asc" ? updown3.id : updown2.id) :  updown1.id*/}
                        {/*}/>*/}
                    </Flex>

                    <Flex
                        justify="center"
                        onClick={() => {
                            this.changeOrder('salenum', distribution.sortField =='salenum' ? ( distribution.sortOrder=="asc" ? "desc" : "asc" ) : "asc")}
                        }
                    >
                        <span style={{marginRight: '.04rem'}}>销量</span>
                        <Icon  type={
                            distribution.sortField =='salenum' ? (distribution.sortOrder=="asc" ? updown2.id : updown3.id) :  updown1.id
                        }/>
                    </Flex>

                    <Flex
                        justify="center"
                        onClick={() => {
                            this.changeOrder('goodsStorePrice',distribution.sortField =='goodsStorePrice' ? ( distribution.sortOrder=="asc" ? "desc" : "asc" ) : "asc")}
                        }
                    >
                        <span style={{marginRight: '.04rem'}}>价格</span>
                        <Icon  type={
                            distribution.sortField =='goodsStorePrice' ? (distribution.sortOrder=="asc" ? updown2.id : updown3.id) :  updown1.id
                        }/>
                    </Flex>

                    <Flex
                        justify="center"
                        onClick={() => {
                            this.changeOrder('commission',distribution.sortField =='commission' ? ( distribution.sortOrder=="asc" ? "desc" : "asc" ) : "asc")}
                        }
                    >
                        <span style={{marginRight: '.04rem'}}>提成</span>
                        <Icon  type={
                            distribution.sortField =='commission' ? (distribution.sortOrder=="asc" ? updown2.id : updown3.id) :  updown1.id
                        }/>
                    </Flex>

                </Flex>:""}
                {myStoreDetailList[0]? <MyListView
                    style={{height:"100%"}}
                    getAlloyTouch={ this.getAlloyTouch }
                    refresh={ this.refresh }
                    loadMore={ this.loadMore }
                    hasMore={ this.props.distribution.myStorelist.pageNo * this.props.distribution.myStorelist.pageSize < this.props.distribution.myStorelist.totalRows  }
                    // itemWrapperClass={ goods_list }
                    // bottomStyle={ layoutType == true ? {} : { marginTop:"0.2rem", paddingTop:'0rem' } }
                    renderItem={(v,i,a)=>{
                        return <DistributionItem v={v} my={true} refresh={this.refresh} key={i} dispatch={dispatch}></DistributionItem>
                    }}
                    data={ myStoreDetailList }>
                </MyListView>:<div style={{width: "100%", height: "8rem", background: "#f6f6f6"}}>
                    <img src={ require('../../assets/img/noGoods.png')} style={{display: "block", margin: "3rem auto 0"}} />
                    <p style={{fontSize: ".3rem", padding: ".2rem 0 .3rem", textAlign: "center", color: "#b9b9b9"}}>当前暂无商品...</p>
                </div>}


                <div className={tianjiaGoods} onClick={()=>{
                    this.props.dispatch(routerRedux.push({
                        pathname:`/distribution`
                    }))
                }}></div>
            </Flex>

        )


    }
}

export default connect(({ distribution }) => ({ distribution}))(MyDistribution);
